<template>
    <el-sub-menu v-if="menu.children.length>1" :index="menu.id" >
        <el-icon><icon-menu /></el-icon>
        <span>{{menu.name}}</span>
        <!-- <RecursiveComponent :menu="child" v-for="child in menu.children"></RecursiveComponent> -->
        <el-menu-item v-for="child in menu.children" :key="child.id">
            <el-icon><icon-menu /></el-icon>
            <span>{{child.name}}</span>
        </el-menu-item>
    </el-sub-menu>

    <el-menu-item v-else :index="menu.id">
        <el-icon><icon-menu /></el-icon>
        <span>{{menu.name}}</span>
    </el-menu-item>
</template>

<script setup>
defineOptions({
  name: "menu-item",
  inheritAttrs: false,
});
const props = defineProps({
    menu: {
        type: Object,
        required: true
    }
})

onMounted(()=>{
    console.log("menu", props.menu)
})

</script>